html, body{
    background-color: #2b2b2b;
    color: #999;
    overflow: hidden;
    font: "msyh"
}
ul, li {list-style: none; padding:0; margin:0; }
/*
input::-webkit-input-placeholder { color: #f00; }
input::-moz-input-placeholder { color: #f00; }
input::-ms-input-placeholder { color: #f00; }
*/
.root-container {border: 1px solid #3c3f41; border-top-color: #515151}
.top-separator {height:3px; background-color: #3c3f41;border-top:1px solid #515151}
.tool-bar {overflow: auto;}
.tool-bar, .tool-bar > li {background-color: #3c3f41; }
.tool-bar > li {display: inline-block;}
.tool-bar > .separator { 
    padding: 0 3px ; height: 36px;
    background-image: url(images/separator.png); background-position: center; background-repeat: no-repeat;
}
.tool-bar > li > a.tool-button {
    display: block; height: 36px; width: 36px; background-position: center; background-repeat: no-repeat; cursor: pointer;
}
.tool-bar > li > a.tool-button:hover {background-color: #4c5052;}
.tool-bar > li > a.tool-button.disabled { cursor: default }
.tool-bar > li > a.tool-button.disabled:hover { background-color: #3c3f41;}

.btn-cloud-server {background-image: url(images/16x16/cloud-server.png);}
.btn-create {background-image: url(images/16x16/create.png);}
.btn-edit {background-image: url(images/16x16/edit.png);}
.btn-edit.disabled {background-image: url(images/16x16/edit-disabled.png);}
.btn-remove {background-image: url(images/16x16/remove.png);}
.btn-remove.disabled {background-image: url(images/16x16/remove-disabled.png);}
.btn-settings {background-image: url(images/16x16/settings.png);}
.btn-connected {background-image: url(images/16x16/connected.png);}
.btn-connected.disabled { background-image: url(images/16x16/connected-disabled.png);}
.btn-disconnected {background-image: url(images/16x16/disconnected.png);}
.btn-disconnected.disabled { background-image: url(images/16x16/disconnected-disabled.png);}
.btn-ok { background-image: url(images/16x16/ok.png);}
.btn-ok.disabled {background-image: url(images/16x16/ok-disabled.png);}
.btn-cancel { background-image: url(images/16x16/cancel.png);}
.btn-cancel.disabled {background-image: url(images/16x16/cancel-disabled.png);}
/*.btn-help { background-image: url(images/16x16/help.png);}*/
.btn-about { background-image: url(images/16x16/about.png);}

/*
.switch {display: inline-block; width: 24px; height:24px; cursor: pointer; background-position: center; background-repeat: no-repeat;}
.switch.on {background-image: url(images/24x24/switch-on.png);}
*/
.proxy-list {overflow: auto; /*border:1px solid #515151;*/}
.proxy-list > li {border-bottom:1px solid #515151; cursor: default; padding-right: 10px}
.proxy-list > li:last-child {border-bottom: none;}
.proxy-list > li:hover/*, .proxy-list > li.selected*/ {background-color:#333}
.proxy-list > li.selected {background-color: #373737}
.proxy-list .connecting {height: 80px; line-height: 80px;}
.connect-status {width:80px;height:80px;background-position: center; background-repeat: no-repeat; display: inline-block;}
.connect-status.connected {background-image: url(images/64x64/exchange.png);}
.connect-status.disconnected {background-image: url(images/64x64/exchange-disabled.png);}
.tunnel-info {float: left!important; padding-top:16px;}
.tunnel-name {font-size: 18px;font-weight: bold;margin-bottom: 5px;
    /* font-family: '微软雅黑', 'MSYH', monospace; */
}
.edit-pane {float:right!important; padding-right:20px; margin-top:16px;}
.switch-root {margin-top:13px}
/* .switch-cell {min-width: 60px} */
/*
.custom-switch {width: 24px; height: 24px; background-position: center; background-repeat: no-repeat; cursor: pointer; display: inline-block; background-clip: content-box;}
.custom-switch.on {background-image: url(images/32x32/switch-on.png);}
.custom-switch.off {background-image: url(images/32x32/switch-off.png);}
*/
.server-list {width: 240px; border-right:1px solid #3c3f41;overflow: auto;}
.server-list>li {border-bottom: 1px solid #515151;}
/* .server-list>li.selected {font-weight: bold; background-color: #666;} */
.server-list > li:last-child {border-bottom: none}
.server-list > li > a { display:block; padding: 10px; cursor: pointer; color: #999}
.server-list > li > a:hover, .server-list > li.selected {background-color:#414141; text-decoration: none;}

ul::-webkit-scrollbar, .inner::-webkit-scrollbar {width: 5px;border-radius:3px;background-color: #1f1f1f;border-color: #333;opacity: 0.5;}
ul::-webkit-scrollbar-thumb, .inner::-webkit-scrollbar-thumb {border-radius: 3px;background-color: #666;}

.server-editor td {padding: 10px; /*vertical-align: top;*/}
.label-field {text-align: right; white-space: nowrap;}
.label-field>label {margin:0; font-weight: normal;}
.label-field.disabled>label {color: #666}
.form-control, .form-control:disabled, .form-control:read-only {background-color: #2b2b2b; border: 1px solid #666; border-radius: 0; width: 280px; color:#999;}
.form-control:read-only {background-color: #2b2b2b; border: 1px solid #444; border-radius: 0; width: 280px; color:#999;}
.form-control::-webkit-input-placeholder { color:#515151; }
.number-field {text-align: right; ime-mode: disabled;}
#server-name {width:230px;}
#hidden-panel {display: none;}
.error-message {color: #c00;}
.error-box {border-color: #c00;}

/************************************* about ******************************/
.about-table td {padding: 10px;}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner, .bootstrap-select>.dropdown-toggle {
    background-color: #2b2b2b; color:#999
}
.bootstrap-select>.dropdown-toggle {
    border:1px solid #666; border-radius: 0
}
.dropdown-menu {background-color:#2b2b2b; border:1px solid #666; border-radius:0;}
.dropdown-menu>li>a {color:#999; padding:10px 20px}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>li>a:hover {color:#999; background-color:#333;}
/* .dropdown-menu>.active>a, .dropdown-menu>.active>a:hover {border-style:solid; border-width:1px 0; border-color:#666} */
.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
    background-color:#2b2b2b; color:#666; border-color:#666; border-radius:0
}
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    background-color:#2b2b2b; color:#666; border-radius:0; border-color:#777
}

.control-field, .control-field .form-control {width: 100%;}

.field-memo {color: #666}